<script setup lang="ts">
import { ref } from 'vue'
import CeData from '@/assets/json/4.json'
import { ChatboxOutline, PlayOutline } from '@vicons/ionicons5'

const list = CeData.new_graphica
const inputValues = ref<string[]>(Array(list.length).fill(''))

const onlyAllowAudio = (value: string) => !value || /^[A-Za-z0-9.]+$/.test(value)

const getNinputValue = (index: number) => {
  console.log(inputValues.value[index]) // 输出对应输入框的值
}
</script>

<template>
  <n-card style="margin-top: 3vh">
    <div class="coordinate">
      <n-input
        v-for="(shape, shapeIndex) in list"
        :key="shapeIndex"
        placeholder="搜索 "
        :allow-input="onlyAllowAudio"
        :value="inputValues[shapeIndex]"
        @update:value="(val) => inputValues[shapeIndex] = val"
      >
        <template #prefix>
          <n-icon>
            <ChatboxOutline />
          </n-icon>
        </template>
        <template #suffix>
          <n-button text style="font-size: 15px">
            <n-icon @click="getNinputValue(shapeIndex)">
              <PlayOutline />
            </n-icon>
          </n-button>
        </template>
      </n-input>
    </div>
  </n-card>
</template>
